<template>
  <div class="content-wrap">
    <van-nav-bar title="个人头像" left-arrow @click-left="$router.go(-1)">
      <van-icon name="ellipsis" slot="right" @click="selectShow = true"/>
    </van-nav-bar>

    <div class="content">
      <img src="https://img.yzcdn.cn/vant/apple-1.jpg">
    </div>

    <van-uploader :after-read="afterRead" ref="uploader"/>
    <van-action-sheet
      v-model="selectShow"
      :actions="actions"
      cancel-text="取消"
      @select="onSelect"
    />
  </div>
</template>

<script>
  export default {
    name: 'editAvatar',
    data () {
      return {
        selectShow: false,
        actions: [
          { name: '上传新头像' }
        ]
      }
    },
    methods: {
      afterRead (file) {
        console.log(file)
      },
      onSelect (obj, index) {
        console.log(index)
        if (index === 0) {
          document.querySelector('.van-uploader .van-uploader__input').click()
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .content {
    position: relative;
    flex: 1;
    background: #000;

    img {
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 100%;
      max-height: 100%;
    }
  }

  .van-uploader {
    position: absolute;
    width: 0;
    height: 0;
    left: -10000px;
    bottom: -10000px;
    visibility: hidden;
    opacity: 0;
  }
</style>
